import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { resetQuestionData } from '@/components/question/utils';
import RichText from '@/components/rich-text';
import useQuestionnaireStore from '@/store/questionnaire';
import { Checkbox, InputNumber } from 'ant-design-vue';
import { defineComponent, PropType } from 'vue';
import './style.css';

const richTextStyle = { height: '150px' };
const defaultToolbarConfig = {
  toolbarKeys: [
    'bold',
    'underline',
    'italic',
    // 'through',
    'color',
    // 'bgColor',
    '|',
    'fontSize',
    'fontFamily',
    'lineHeight',
    '|',
    {
      iconSvg:
        '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
      key: 'group-justify',
      menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
    },
    {
      iconSvg:
        '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
      key: 'group-indent',
      menuKeys: ['indent', 'delIndent'],
    },
    '|',
    'emotion',
    'insertLink',
  ],
};

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
    showMustAnswer: {
      type: Boolean,
      default: true,
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const { language, question, showMustAnswer, showTitle } = props;
    const questions = useQuestionnaireStore().getQuestions;
    const questionnaireBasicInfo = useQuestionnaireStore().getBasicInfo;
    const questionnaire = useQuestionnaireStore().getQuestionnaire;
    const questionProper =
      language === 'zh' ? question?.questionProperZh : question?.questionProperEn;
    const questionProperTitleLabel: string = language === 'zh' ? '中文题目:' : '英文题目:';
    const labelOrder: string = '显示顺序';
    const labelMustAnswer: string = '必答题';

    const questionOrderChange = () => {
      const newOrder = question!.order;
      questions?.splice(question!.index!, 1);
      if (newOrder === 1) {
        questions?.unshift(question!);
      } else if (newOrder >= questions!.length) {
        questions?.push(question!);
      } else {
        let endIndex = newOrder - 1;
        let startIndex = 0;
        let newOrderQuestions = questions!.slice(startIndex, endIndex);
        newOrderQuestions.push(question!);
        startIndex = endIndex;
        newOrderQuestions = newOrderQuestions.concat(
          questions!.slice(startIndex, questions!.length),
        );
        questions?.splice(0, questions.length);
        newOrderQuestions.forEach(eachQuestion => {
          questions?.push(eachQuestion);
        });
      }

      let questionNumber = 1;
      questions?.forEach((eachQuestion, index) => {
        eachQuestion.index = index;
        eachQuestion.order = index + 1;
        if (eachQuestion.type === 'paging') {
          eachQuestion.number = -1;
        } else {
          eachQuestion.number = questionNumber;
          questionNumber++;
        }
      });

      questionnaireBasicInfo.activeQuestionIndex = question?.index;
      resetQuestionData(questionnaire);
    };

    return () => {
      return (
        <>
          {showTitle ? (
            <>
              <div class="question-proper-title-label">{questionProperTitleLabel}</div>
              <RichText
                v-model:value={questionProper!.title}
                editorStyle={richTextStyle}
                toolbarConfig={defaultToolbarConfig}
              />
            </>
          ) : (
            <></>
          )}
          <div class="attribute-panel-item-input-container">
            <label>
              {labelOrder}:
              <InputNumber
                class="attribute-panel-item-input"
                placeholder={labelOrder}
                v-model:value={question!.order}
                min={1}
                onBlur={questionOrderChange}
                onPressEnter={questionOrderChange}
              />
            </label>
          </div>
          {showMustAnswer === true ? (
            <div class="attribute-panel-item-input-container">
              <label>
                {labelMustAnswer}:
                <Checkbox
                  class="attribute-panel-item-input"
                  v-model:checked={question!.mustAnswer}
                />
              </label>
            </div>
          ) : (
            <></>
          )}
        </>
      );
    };
  },
});
